<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../jtopo-0.4.8.js"></script>
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../jtopoToJson.js"></script>
    <script type="text/javascript">
    var addNode;

    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
        // console.log(ev);
    }

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        addNode(ev.offsetX, ev.offsetY, $.trim(data));
        // console.log(ev);
        // console.log(data);
    }
    $(document).ready(function() {


        var canvas = document.getElementById('canvas');
        var stage = null;
        var scene = null;
        var linkStyle = 0; //连线的样式值 0为Link 1为FoldLink 2为FlexionalLink 3为CurveLink
        var arrowsRadius = null; //箭头
        var dashedPattern = null; //虚线
        var direction = "horizontal"; //折线的方向 vertical或horiznotal

        if (sessionStorage.scene) {
            var data = sessionStorage.scene; //string
            stage = createTopoFromJson(data, canvas);
            console.log(stage);
            scene = stage.childs[0];

        } else {
            stage = new JTopo.Stage(canvas);
            scene = new JTopo.Scene(stage);
            scene.background = './img/bg.jpg';

        }
        // 创建节点;
        addNode = function(X, Y, img) {
            console.log(X, Y);
            var node = new JTopo.Node(new Date().getTime());
            node.setImage('./img/' + img + '.png', true);
            node.fontColor = "0,0,0";
            node.setLocation(X, Y);
            scene.add(node);
            // console.log(node);
        }
        var beginNode = null;
        var tempNodeA = new JTopo.Node("tempA");
        tempNodeA.setSize(1, 1);
        var tempNodeZ = new JTopo.Node("tempZ");
        tempNodeZ.setSize(1, 1);
        // var tempLink = creatLink(tempNodeA, tempNodeZ);
        var tempLink = new JTopo.Link(tempNodeA, tempNodeZ);

        function creatLink(nodeA, nodeZ) {
            var link = null;
            // var link = new JTopo.Link(beginNode, endNode);
            switch (linkStyle) {
                case "1":
                    link = new JTopo.FoldLink(nodeA, nodeZ); //折线
                    link.elementType = "foldLink";
                    link.direction = direction;
                    break;
                case "2":
                    link = new JTopo.FlexionalLink(nodeA, nodeZ); //二次折线
                    link.elementType = "flexionalLink";
                    link.direction = direction;
                    break;
                case "3":
                    link = new JTopo.CurveLink(nodeA, nodeZ); //曲线
                    link.elementType = "curveLink";
                    link.direction = direction;
                    break;
                default:
                    link = new JTopo.Link(nodeA, nodeZ);
            }
            return link;
        }

        function addLink(e) {
            if (e.button == 0) { //左键
                if (e.target != null && e.target instanceof JTopo.Node) {
                    if (beginNode == null) {
                        beginNode = e.target;
                        scene.add(tempLink);
                        tempNodeA.setLocation(e.x, e.y);
                        tempNodeZ.setLocation(e.x, e.y);
                    } else if (beginNode != e.target) {
                        var endNode = e.target;
                        var link = creatLink(beginNode, endNode);
                        link.fontColor = "0,0,0"; //字体颜色默认为白色  
                        link.arrowsRadius = arrowsRadius; //箭头
                        link.dashedPattern = dashedPattern; //虚线
                        scene.add(link);
                        beginNode = null;
                        scene.remove(tempLink);
                    } else {
                        beginNode = null;
                    }
                } else {
                    beginNode = null;
                    scene.remove(tempLink);
                }
            } else {
                scene.remove(tempLink);
                return;
            }

        }

        scene.mousedown(function(e) {
            if (e.target == null || e.target === beginNode || e.target === tempLink) {
                scene.remove(tempLink);
            }
        });
        scene.mousemove(function(e) {
            tempNodeZ.setLocation(e.x, e.y);
        });

        var textfield = $("#jtopo_textfield");
        // 双击节点、连线
        scene.dbclick(function(event) {
            // console.log(event);
            if (event.target == null) return;
            var e = event.target;
            textfield.css({
                top: event.pageY + e.height / 2,
                left: event.pageX - e.width / 2
            }).show().val((e.text)).focus().select();
            e.text = "";
            textfield[0].JTopoNode = e;
        });
        $("#jtopo_textfield").blur(function() {
            textfield[0].JTopoNode.text = textfield.hide().val().replace(/\n/g, '');
        });


        var currentNode = null;
        var currentLink = null;

        function handler(event) {
            if (event.target.elementType == "node") {
                $("#linkmenu").hide();
                currentNode = event.target;
                // 当前位置弹出菜单（div）
                $("#contextmenu").css({
                    top: event.pageY,
                    left: event.pageX
                }).show();
            } else {
                $("#contextmenu").hide();
                currentLink = event.target;
                $("#linkmenu").css({
                    top: event.pageY,
                    left: event.pageX
                }).show();
            }
        }

        scene.addEventListener('mouseup', function(event) { //监听scene鼠标松开事件
            // console.log(event);
            if (event.button == 2 && event.target != null) { //右键点击节点
                handler(event);
                // console.log(event);
            } else {
                $("#contextmenu").hide();
                $("#linkmenu").hide();
                addLink(event);
            }
        });

        $("#contextmenu a").click(function() {
            var text = $(this).text();

            if (text == '顺时针旋转') {
                currentNode.rotate += 1.57;
            } else if (text == '逆时针旋转') {
                currentNode.rotate -= 1.57;
            } else if (text == '删除该节点') {
                scene.remove(currentNode);
                currentNode = null;
            }
            $("#contextmenu").hide();
        });
        $("#linkmenu a").click(function() {
            var text = $(this).text();

            if (text == '删除') {
                scene.remove(currentLink);
                currentLink = null;
            }
            $("#linkmenu").hide();
        });


        $('#save').click(function() {
            // var jsonStr = stage.toJson();
            var a = stage.childs[0].childs;
            console.log(a);
            var data = getJsonData(stage);
            console.log(stage);
            if (sessionStorage.scene)
                sessionStorage.removeItem('scene'); //清除
            sessionStorage.scene = data;
            // console.log(jsonStr);
        });

        $('#linkStyle').change(function() {
            linkStyle = $('#linkStyle').val();
            tempLink = creatLink(tempNodeA, tempNodeZ);
        });
        $('#dashedPattern').change(function() {
            if ($('#dashedPattern').val() == "1")
                dashedPattern = 5;
            else
                dashedPattern = null;
        });
        $('#arrowsRadius').change(function() {
            if ($('#arrowsRadius').val() == "1")
                arrowsRadius = 10;
            else
                arrowsRadius = null;
        });
        $('#direction').change(function() {
            if ($('#direction').val() == "0") {
                direction = "horizontal";
                tempLink.direction = "horizontal";
            } else {
                direction = "vertical";
                tempLink.direction = "vertical";
            }
        });

    });
    </script>
    <style>
    img {
        float: left;
        margin: 10px;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    #contextmenu,
    #linkmenu {
        background: #fff;
        border: 1px solid #000;
        padding-left: 0px;
        width: 100px;
    }

    #contextmenu li,
    #linkmenu li {
        height: 30px;
        padding-left: 10px;
        line-height: 30px;
        border-bottom: 1px solid #000;

    }

    li:last-child {
        border-bottom: none !important;
    }
    </style>
</head>

<body>
    <div style="height: 80px; border: 1px solid #666;margin-bottom: 10px;">
        <img src="img/center.png" id="center" draggable="true" ondragstart="drag(event)">
        <img src="img/cloud.png" id="cloud" draggable="true" ondragstart="drag(event)">
        <img src="img/gather.png" id="gather" draggable="true" ondragstart="drag(event)">
        <img src="img/host.png" id="host" draggable="true" ondragstart="drag(event)">
        <img src="img/server.png" id="server" draggable="true" ondragstart="drag(event)">
        <img src="img/wanjet.png" id="wanjet"draggable="true" ondragstart="drag(event)">
        <button id="save">保存</button>
    </div>
    <div id="">
        连线样式：
        <select id="linkStyle">
            <option value="0">默认</option>
            <option value="1">折线</option>
            <option value="2">二次折线</option>
            <option value="3">曲线</option>
        </select>
        虚线：
        <select id="dashedPattern">
            <option value="0">关闭</option>
            <option value="1">开启</option>
        </select>
        箭头：
        <select id="arrowsRadius">
            <option value="0">关闭</option>
            <option value="1">开启</option>
        </select>
        折线方向：
        <select id="direction">
            <option value="0">水平</option>
            <option value="1">垂直</option>
        </select>
    </div>
    <canvas id="canvas" width="600px" height="400px" style="border: 1px solid #000; " ondrop="drop(event)" ondragover="allowDrop(event)">
    </canvas>
    <textarea id="jtopo_textfield" cols="10" rows="2" style="display: none;position: absolute;"></textarea>
    <ul id="contextmenu" style="display:none;position: absolute;">
        <li><a href="#">顺时针旋转</a></li>
        <li><a href="#">逆时针旋转</a></li>
        <!-- <li><a href="#">重命名</a></li> -->
        <li><a href="#">删除该节点</a></li>
    </ul>
    <ul id="linkmenu" style="display:none;position: absolute;">
        <li><a href="#">删除</a></li>
    </ul>
</body>

</html>